<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/page/share/taglib.jsp" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

    path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + request.getContextPath() + request.getServletPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">

    <title>在线考试</title>
    <link type="text/css" href="<%=basePath%>/css/base.css" rel="stylesheet"/>
    <link type="text/css" href="<%=basePath%>/css/downMenu.css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/menu.js"></script>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=basePath%>/js/jquery.min.js"></script>
    <link href='<%=basePath%>/css/bootstrap-2.3.2.css' rel='stylesheet'>
    <script type="text/javascript" src="<%=basePath%>/js/bootstrap.min.js"></script>


    <script src='<%=basePath%>/js/application.js' type="text/javascript"></script>


    <link href='<%=basePath%>/css/docs.css' rel='stylesheet'>
    <link href='<%=basePath%>/css/addTestPaper.css' rel='stylesheet'>

    <script type="text/javascript" src="<%=basePath%>/js/icheck.js"></script>

    <link href="<%=basePath%>/css/custom.css" rel="stylesheet">
    <link href="<%=basePath%>/css/line/_all.css" rel="stylesheet">
    <link href="<%=basePath%>/css/square/_all.css" rel="stylesheet">

    <style type="text/css">
        .testHead {
            padding-top: 50px;
        }


    </style>


    <script type="text/javascript">

        /*跳转路径改变*/
        function changeHref(tab) {
            window.location.href = "Examination!beginExamination.action" + $(tab).attr("href");
        }

        $(document).ready(function () {
            createPageView();
        });
        var category = "";
        var flag = 0;
        var testCount = 1;
        function createPageView() {
            <c:forEach items="${pageView.records}" var="test" >
            if (flag == 0) {
                if (category != "${test.test.category.id}") {
                    var active = "";
                    if (testCount == 1) {
                        active = "active";
                    }
                    var docs_section = '<div class="bs-docs-section"><div class="page-header">' +
                            '<h1 style="" id="categorySection${test.test.category.id}">${test.test.category.type}</h1></div>' +
                            '<div id="categoryTests${test.test.category.id}" tag="${test.test.category.id}"></div></div>';
                    var nav_li = '<li id="selectAffix${test.test.category.id}" class="' + active + '">' +
                            '<a onclick="changeHref(this);return false" href="#categorySection${test.test.category.id}">' +
                            '${test.test.category.type}&nbsp;&nbsp;<span class="categoryScore${test.test.category.id}"></span>' +
                            '<span class="badge badge-info" id="badge${test.test.category.id}" style="float: right;font-weight:normal;">0</span></a>' +
                            '<ul class="nav" id="nav${test.test.category.id}"></ul></li>';
                    $('.nav.bs-sidenav').append(nav_li);
                    $(".selectTestList").append(docs_section);
                    category = "${test.test.category.id}";
                    flag = 1;
                }
            } else {
                if (category == "${test.test.category.id}") {
                    flag = 0;
                } else {
                    docs_section = '<div  class="bs-docs-section"><div class="page-header">' +
                            '<h1 style="" id="categorySection${test.test.category.id}">${test.test.category.type}</h1></div>' +
                            '<div id="categoryTests${test.test.category.id}" tag="${test.test.category.id}"></div></div>';

                    nav_li = '<li id="selectAffix${test.test.category.id}" class="">' +
                            '<a onclick="changeHref(this);return false" href="#categorySection${test.test.category.id}">' +
                            '${test.test.category.type}&nbsp;&nbsp;<span class="categoryScore${test.test.category.id}"></span>' +
                            '<span class="badge badge-info" id="badge${test.test.category.id}" style="float: right;font-weight:normal;">0</span></a>' +
                            '<ul class="nav" id="nav${test.test.category.id}"></ul></li>';
                    $('.nav.bs-sidenav').append(nav_li);
                    $(".selectTestList").append(docs_section);

                    category = "${test.test.category.id}";
                    flag = 1;
                }
            }


            var testId = ${test.test.id};
            var categoryTest =
                    '<h3 class="testHead testHead' + testCount + '" id="testHead' + testCount + '"> 第' + testCount + '题' +
                            ' (${test.score}分)</h3><div id="tests' + testId
                            + '" class="everyTest" score="${test.score}"  tag="' + testId + '">' +
                            '<div class="panel-body well well-lg" style="padding:20px;background-color: #F9F9F9;margin-bottom: 10px;" id="' +
                            testId + '">' + '<div class="the_themes" style="word-break:break-all;">${test.test.theme}</div> ' +
                            '<br/>' + '</div></div></div>';
            $("#categoryTests" + category).append(categoryTest);


            if ("单选题" == "${test.test.category.type}") {
                var myDiv = $("#" + testId).children("div").children("div");
                for (var k = 0; k < myDiv.length; k++) {
                    var key = $(myDiv[k]).children("span").text().replace(".", "");
                    var theChooseinput =
                            "<div class='skin skin-square' style='float: left'><ul class='list'><li>" +
                                    "<input tabindex='" + testId + "' type='radio' id='square-radio-" + testId + "-" + key +
                                    "' name='answer-" + testId + "' value='" + key + "' >" +
                                    "<label for='square-radio-" + testId + "-" + key + "' >&nbsp;&nbsp;" + key + ".</label></li></ul></div>";
                    $(myDiv[k]).prepend(theChooseinput);
                    $(myDiv[k]).children("span").remove();
                    $(myDiv[k]).after("<br/>");
                }

            } else if ("判断题" == "${test.test.category.type}") {
                myDiv = $("#" + testId).children("div");
                theChooseinput =
                        "<div class='skin skin-square' style='float: left'><ul class='list'><li>" +
                                "<input tabindex='" + testId + "' type='radio' id='square-radio-" + testId + "-T" +
                                "' name='answer-" + testId + "' value='T' >" +
                                "<label for='square-radio-" + testId + "-T" + "' >&nbsp;&nbsp;说法正确</label></li></ul></div><br/><br/>";
                theChooseinput +=
                        "<div class='skin skin-square' style='float: left'><ul class='list'><li>" +
                                "<input tabindex='" + testId + "' type='radio' id='square-radio-" + testId + "-F" +
                                "' name='answer-" + testId + "' value='F' >" +
                                "<label for='square-radio-" + testId + "-F" + "' >&nbsp;&nbsp;说法错误</label></li></ul></div>";
                $(myDiv[0]).after(theChooseinput);


            } else if ("多选题" == "${test.test.category.type}") {
                myDiv = $("#" + testId).children("div").children("div");
                for (k = 0; k < myDiv.length; k++) {
                    key = $(myDiv[k]).children("span").text().replace(".", "");
                    theChooseinput =
                            "<div class='skin skin-square' style='float: left'><ul class='list'><li>" +
                                    "<input tabindex='" + testId + "' type='checkbox' id='square-checkbox-" + testId + "-" + key +
                                    "' name='answer-" + testId + "' value='" + key + "' >" +
                                    "<label for='square-checkbox-" + testId + "-" + key + "' >&nbsp;&nbsp;" + key + ".</label></li></ul></div>";
                    $(myDiv[k]).prepend(theChooseinput);
                    $(myDiv[k]).children("span").remove();
                    $(myDiv[k]).after("<br/>");
                }

            } else if ("填空题" == "${test.test.category.type}") {

            } else if ("问答题" == "${test.test.category.type}") {
                myDiv = $("#" + testId).children("div");
                theChooseinput =
                        '<textarea class="form-control" rows="3"></textarea>';
                $(myDiv[0]).after(theChooseinput);

            }
            $('.skin-square input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '10%'
            });

            var ul =
                    '<li score = "${test.score}">' +
                            '<a href="#testHead' + testCount + '" onclick="changeHref(this);return false">' +
                            '第' + testCount + '题(${test.score}分)</a></li>';

            $("#nav" + category).append(ul);
            $("#badge" + category).text((parseInt($("#badge" + category).text()) + 1));
            testCount++;
            </c:forEach>

            var subject = $("li[id^='selectAffix']");

            for (var i = 0; i < subject.length; i++) {
                var scores = $($(subject[i]).children("ul")).children("li");
                var allScorce = 0.0;
                for (var j = 0; j < scores.length; j++) {
                    allScorce += parseFloat($(scores[j]).attr("score"));
                }
                $($(subject[i])).children("a").children("span[class^='categoryScore']").html("(" + allScorce + "分)");
            }
        }
        document.oncontextmenu = new
                Function("event.returnValue=false");
        document.onselectstart = new
                Function("event.returnValue=false");
    </script>

</head>

<body style="margin-top: 30px;" oncontextmenu='return false'
      ondragstart='return false'
      onselectstart='return false'
      onselect="return false"
      oncopy="return false"
      onbeforecopy="return false"
      onmouseup="document.selection.empty()">
<div class="container" style="margin-top: 30px;">
    <div class="row">
        <div class="col-md-3">

            <div class="bs-sidebar " role="complementary" data-spy="affix" id="myAffix">
                <ul class="nav bs-sidenav">

                </ul>
            </div>
        </div>

        <div class="col-md-9 " role="main">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header" style="margin-left: 80px;">
                    <span class="navbar-brand" style="cursor: default;">考生:</span>
                    <span class="navbar-brand testPaperName" style="cursor: default;">${person.accout}</span>
                    <span class="navbar-brand" style="cursor: default;">科目:</span>
                    <span class="navbar-brand testPaperSubject" style="cursor: default;">${examination.subject.subjectName}</span>
                    <span class="navbar-brand" style="cursor: default;">试卷总分:</span>
                    <span class="navbar-brand totalScore" style="cursor: default;">${testPaperInfo.sumScore}分</span>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">

                        <li style="margin-top: 10px;margin-right: 50px;">
                            <form action="TestPaper!showTestPaper.action" method="post">
                                <input type="hidden" name="account" value="${person.accout}"/>
                                <button type="submit" class="btn btn-warning">
                                    返回
                                </button>
                            </form>

                        </li>

                    </ul>
                </div>
            </nav>

            <div class="selectTestList" data-spy="scroll"></div>
        </div>
    </div>
</div>

<div id="footer">
    <p style="text-align: center;color: #757575;padding: 20px 0px 0px 0px; font:12px;">Copyright © 2010-2013 蓝天白云团队
        版权所有</p>
</div>
</body>
</html>
